import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import Nav from '../../components/Nav/Nav'
import Message from './Message/Message'
import News from './News/News'
import './Home.css'

export default class Home extends Component {

    state = {
        routerList: [
            { to: '/home/message', name: 'Message' },
            { to: '/home/news', name: 'News' }
        ]
    }

    render() {
        return (
            <div>
                Home
                <ul className="tabs">
                    {
                        this.state.routerList.map((v, i) => {
                            return <li key={i}><Nav {...v}>{v.name}</Nav></li>
                        })
                    }
                </ul>
                <Switch>
                    <Route path="/home/message" component={Message} />
                    <Route path="/home/news" component={News} />
                    <Redirect to="/home/message" />
                </Switch>
            </div>
        )
    }
}
